<template>
  <!-- 全屏组件 -->
  <el-icon @click="screen" :size="this.size" class="iconfont icon-quanping"></el-icon>
</template>

<script>
import screenfull from 'screenfull' // 引入全屏插件

export default {
  data () {
    return {
      fullscreen: false // 全屏
    }
  },

  // 组件传值
  props: ['size'],

  methods: {
    // 全屏方法
    screen () {
      // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: '您的浏览器版本过低不支持全屏显示！',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }

    // 全屏方法结束
  }
}
</script>

<style lang="less" scoped></style>
